<template>
  <view class="container">
    <!-- 提示窗示例 -->
    <view>
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog
          :type="state.msgType"
          cancelText="取消"
          confirmText="创建"
          title="确定创建？"
          content="将创建一个任务？"
          @confirm="dialogCreateTaskConfirm"
          @close="dialogClose"
        ></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const emit = defineEmits(['create-task-confirm'])

// 使用reactive创建响应式对象
const state = reactive({
  msgType: 'error',
})

// 使用ref创建引用
const alertDialog = ref<InstanceType<any> | null>(null)

// 方法
const dialogToggle = (type: typeof state.msgType) => {
  state.msgType = type
  if (alertDialog.value) alertDialog.value.open()
}

const dialogCreateTaskConfirm = () => {
  emit('create-task-confirm')
}

const dialogClose = () => {
  console.log('点击关闭')
}

defineExpose({
  doCreateTaskPopup: dialogToggle,
})
</script>

<style lang="scss">
@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.box {
  @include flex;
}

.button {
  @include flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 35px;
  margin: 0 5px;
  border-radius: 5px;
}

.example-body {
  background-color: #fff;
  padding: 10px 0;
}

.button-text {
  color: #fff;
  font-size: 12px;
}

.popup-error {
  color: #fff;
  background-color: #fde2e2;
}

.error-text {
  color: #f56c6c;
}
</style>
